<template>
  <qx-table :option="tableOption" :remoteData="remoteData"
            class="no-shadow no-padding bg-transparent non-margin-top"></qx-table>
</template>

<script setup>
import { i18n } from 'boot/i18n'
import { computed, nextTick, ref, watch } from 'vue'

const props = defineProps({ modelValue: Boolean, searchForm: { type: Object, default: () => ({}) } })

const remoteData = ref({ dicUrl: '/tpm/yfagv/api/cmMaintenanceStrategy/trigger/detail/list' })
const tableOption = computed(() => {
  return {
    page: false, index: false,
    column: [{
      label: `${i18n.t('Misc.MaintenanceComponent')}`, field: 'maintenanceParts', minWidth: 60
    }, {
      label: `${i18n.t('Misc.MaintenanceContent')}`, field: 'maintenanceContent', minWidth: 60
    }, {
      label: `${i18n.t('Misc.RunningMileage')}\n(${i18n.t('AGVCore.Planning')}/${i18n.t('AGVCore.RunDuration')})`,
      field: 'localMileage', minWidth: 60, format: (_, row) => `${(row.localMileage || 0)}/${row.executedMileage || 0}}`
    }, {
      label: `${i18n.t('Misc.RunningDuration')}\n(${i18n.t('AGVCore.Planning')}/${i18n.t('AGVCore.RunDuration')})`,
      field: 'localRunningTime', minWidth: 60,
      format: (_, row) => `${(row.localRunningTime || 0)}/${row.executedRunningTime || 0}}`
    }]
  }
})

const formatSearchForm = () => {
  const { searchForm = {} } = props
  const params = { ...searchForm }
  params.nonLoadingBar = true
  return params
}
const startSearch = (action, done) => {
  remoteData.value.params = formatSearchForm()
  remoteData.value.clearRows = action === 'clearRows'
  remoteData.value.clearSelected = true
  if (done) done()
}
watch(() => props.modelValue, val => val && nextTick(() => startSearch('clearRows')), { immediate: true })
</script>